<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WebSerial</title>

    <!-- jquery -->
    <script src="lib/jquery/jquery-1.11.3.min.js"></script>

    <!-- Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>

    <script src="lib/webserial.js"></script>
    <script src="lib/setting.js"></script>




  </head>
  <body>
    <div class="container">

      <div class="page-header">
        <h1>WebSerial
          <small>


            <button class="btn btn-primary pull-right" type="button" data-toggle="collapse" data-target="#settings" aria-expanded="false" aria-controls="collapseExample">
              Settings
            </button>
          </small>
        </h1>

      </div>

      <div class="collapse" id="settings">
        <div class="well">
          <p class="bg-info" style="padding:10px;">in:7001 - out:7002</p>

          <div class="form-horizontal">
            <div class="form-group">
              <label for="Baudrate" class="col-sm-2 control-label">Baudrate</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="baudrate" value="9600">
              </div>
              <div class="col-sm-1">
                <button type="button" class="btn btn-default" onclick="setbaudrate();">Set</button>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">Result Type</label>
              <div class="col-sm-10 radio">
                <label>
                  <input type="radio" name="rtype" id="rtypeascii" value="ascii" checked>
                  ASCII
                </label>
                <label>
                  <input type="radio" name="rtype" id="rtypehex" value="hex">
                  HEX
                </label>

              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">Send Type</label>
              <div class="col-sm-10 radio">
                <label>
                  <input type="radio" name="stype" id="stypeascii" value="ascii" checked>
                  ASCII
                </label>
                <label>
                  <input type="radio" name="stype" id="stypehex" value="hex">
                  HEX
                </label>

              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">Action</label>
              <div class="col-sm-10 radio">
                <button class="btn btn-default" onclick="SendHex('ff f4 ff fd 06')">Ctrl+C</button>

              </div>
            </div>

          </div>




        </div>
      </div>



      <div class="panel panel-default">
        <div class="panel-heading clearfix">Serial
          <div class="btn-group pull-right" role="group" aria-label="...">

            <button class="btn btn-default" onclick="SendHex('ff f4 ff fd 06')">Ctrl+C</button>
            <button type="button" class="btn btn-default" onclick="$('#result').val('');">Clean</button>
          </div>
        </div>
        <div class="panel-body">
            <textarea id="result" style="width:100%;height:500px;"></textarea>
        </div>
        <div class="panel-footer clearfix">
          <div class="row">
            <div class="col-md-11">
              <input type="text" class="form-control" id="cmd" >
            </div>
            <div class="col-md-1">
              <button type="button" class="btn btn-success pull-right " onclick="run();">Send</button>
            </div>
          </div>




          <script>
          function run(){
            var txt=$("#cmd").val();
            txt+="\n";
            $("#cmd").val("");
            $("#history").val($("#history").val()+txt);
            toTextareaEnd('history');
            dosend(txt);
          }
          $("#cmd").keyup(function(event){
            if(event.keyCode ==13){
              run();
            }
          });
          function dosend(msg){

            var type=getSendType();
            if (type=="ascii"){
              SendASCII(msg);
            }else{
              SendHex(msg);
            }

          }
          function SendASCII(msg){
            ws.send(msg);
          }

          function SendHex(msg){
            var res="";
            msg=msg.trim();
            msg=msg.replace(/\s/g,"");
            var len=msg.length;
            if ((len % 2)==0){
              var l=len/2;
              for(var i=0;i<l;i++){
                var tt=msg.substr((i*2),2);
                tt=h2i(tt);
                res+=(String.fromCharCode(tt));

              }

            }else{
              console.log(msg);
              alert("Hex Data Error");
            }
              ws.send(res);

          }





          </script>
        </div>
      </div>


      <div class="panel panel-default">
        <div class="panel-heading clearfix">History

        </div>
        <div class="panel-body">
            <textarea id="history" style="width:100%;height:300px;"></textarea>
        </div>
        <div class="panel-footer clearfix">
          <button type="button" class="btn btn-danger pull-right " onclick="$('#history').val('');">Clean</button>
        </div>
      </div>


    </div>
  </body>
</html>
